<template>
  <div>
      <!-- 面包屑 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>考勤管理</el-breadcrumb-item>
      <el-breadcrumb-item>考勤审批</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 内容 -->
    <div id="nr1" class="clear">
      <!-- 导航 -->
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="1">处理中心</el-menu-item>
        <!-- <el-menu-item index="2">已办</el-menu-item>
        <el-menu-item index="3">已完成</el-menu-item> -->
      </el-menu>

      <!-- 搜索 -->
      <el-form ref="approvalData" :model="approvalData" label-width="90px" :inline="true">
        <el-form-item label="流水号">
          <el-input v-model="approvalData.mun"></el-input>
        </el-form-item>
        <el-form-item label="申请类型">
          <el-select v-model="approvalData.type" placeholder="请选择">
            <el-option label="事假" value="1"></el-option>
            <el-option label="年假" value="2"></el-option>
            <el-option label="病假" value="3"></el-option>
            <el-option label="外勤" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发起人">
          <el-input v-model="approvalData.name"></el-input>
        </el-form-item>
        <el-form-item label="部门">
          <el-input v-model="approvalData.depar"></el-input>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-col :span="6">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="approvalData.starttime"
              style="width: 100%"
            ></el-date-picker>
          </el-col>
          <el-col class="line" :span="1">-</el-col>
          <el-col :span="6">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="approvalData.endtime"
              style="width: 100%"
            ></el-date-picker>
          </el-col>

        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 分割线 -->
      <div class="fenge"></div>

      <!-- 表格 -->
      <template>
        <el-table :data="tableData2" stripe style="width: 100%">
          <el-table-column prop="mun" label="流水号" width="100"></el-table-column>
          <el-table-column prop="type" label="申请类型" width=""></el-table-column>
          <el-table-column prop="name" label="发起人" width=""> </el-table-column>
          <el-table-column prop="department_name" label="发起人所属部门" width=""> </el-table-column>
          <el-table-column prop="state" label="当前环节" width=""> </el-table-column>
          <el-table-column prop="starttime" label="开始时间" width=""> </el-table-column>
          <el-table-column prop="endtime" label="结束时间" width=""> </el-table-column>
          <el-table-column prop="applytime" label="申请时间" width="200"> </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[5, 10, 15]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalPage"
        >
        </el-pagination>
      </div>
      
    </div>
  </div>
</template>
<script>
// import { FunnelChart } from 'echarts/charts';
import axios from 'axios'


export default {
  data: function () {
    return {
      activeIndex: "1",   //激活菜单的导航
      approvalData: {    //输入的数据容器
        mun: "",
        type: "",
        name: "",
        depar: "",
        starttime: "",
        endtime:""
      },
      tableData: [],    //渲染请求后返回的数据的容器
      tableData2:[],    //渲染当前页的数据
      tableData3:[],    //原始数据，用于重置
      currentPage4: 1,   //当前页码
      mytotal:1,         //总条数
      myval:5           //当前页条数
    };
  },

// 方法
  methods: {

    // 导航跳转
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },

    //点击查询后执行的函数
    onSubmit() {
        // 将时间转换成我想要的
        if (this.approvalData.starttime == "NaN-NaN-NaN") {
          this.approvalData.starttime = "";
        } else {
          this.approvalData.starttime = this.transferTime(this.approvalData.starttime);
        }
        if (this.approvalData.endtime == "NaN-NaN-NaN") {
          this.approvalData.endtime = "";
        } else {
          this.approvalData.endtime = this.transferTime(this.approvalData.endtime);
        }
        // 去空格
        let mun = this.approvalData.mun;
        mun = mun.replace(/\s*/g, "");
        let type = this.approvalData.type;
        type = type.replace(/\s*/g, "");
        let name = this.approvalData.name;
        name = name.replace(/\s*/g, "");
        let depar = this.approvalData.depar;
        depar = depar.replace(/\s*/g, "");
        let starttime = this.approvalData.starttime;
        starttime = starttime.replace(/\s*/g, "");
        let endtime = this.approvalData.endtime;
        endtime = endtime.replace(/\s*/g, "");
        axios({
            method: 'get',
            url:'/atten/Atten_Approval_query',
            params: {
                mun:mun,
                type: type,
                name: name,
                depar: depar,
                starttime: starttime,
                endtime:endtime
            }
          }).then((res)=>{
            if (res.data == "错误" || res.data =="") {
                this.$message.error('查询失败，请重试');
            }else{
              this.$message({
                message: '查询成功',
                type: 'success'
              });
              this.tableData = res.data;
              this.currentPage4 = 1;
              this.RenderData(this.currentPage4,this.myval);
            }
          })
    },
    // 点击重置
    onReset(){
      this.tableData = this.tableData3;
      this.currentPage4 = 1;
      this.mytotal = 5;
      this.RenderData(this.currentPage4,this.mytotal);
      //重置输入框
        this.approvalData.mun="";
        this.approvalData.type= "";
        this.approvalData.name= "";
        this.approvalData.depar= "";
        this.approvalData.starttime= "";
        this.approvalData.endtime="";

      console.log(this.approvalData);
    },

    // 一个将日期转换成自己想要的格式的方法
    transferTime(time){
      if(time){
        var d = new Date(time);
        var date = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
        return date;
      }else{
        return "";
      }
    },

    //分页
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.myval = val;
        this.RenderData(this.currentPage4,this.mytotal);
    },
    handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPage4 = val;
        this.RenderData(this.currentPage4,this.myval);
    },

    // 渲染的函数
    RenderData(num,num2){
        this.tableData2 = this.tableData.slice((num-1)*num2,num*num2);
    }
  },
//计算
  computed: {
    // 监督总条数
    totalPage(){
      if (this.tableData!=undefined) {
          return this.mytotal =  this.tableData.length;
      }
    }
  },

//钩子函数
  // 页面加载就渲染,
  created:function(){
    axios({
      method: 'get',
      url:'/atten/Atten_Approval_render',
      params: {
        name:1
      }
    }).then((res)=>{
      this.tableData = res.data;
      for (let i = 0; i < res.data.length; i++) {
          this.tableData3.push(res.data[i]);
      }
      this.RenderData(this.currentPage4,this.myval);
    })
  },
};
</script>




<style scoped lang="less">
.clear::after{
    display: block;
    content: "";
    clear: both;
}
#nr1 {
  background-color: #fff;
  margin-top: 20px;
  padding: 0 24px;
  padding-bottom: 24px;
    .el-menu-item:first-child{
        margin-left: 24px;
    }

}
.fenge {
  height: 1px;
  background-color: #e5e5e5;
    padding: 0 24px;
  margin-bottom: 24px;
}
.el-form {
  padding: 0 24px;
  padding-top: 24px;
}
.line{
    text-align: center;
}

.el-form-item{
  margin-left: -24px;
}
.el-form-item:first-child{
  margin-left: -16px;
}
.el-form-item:not(:first-child){
    margin-left: 24px;
}
.el-form-item:nth-child(4){
    margin-left: -16px;
}
.el-form-item:last-child{
  margin-left: -140px;
}
.block{
    margin-top: 24px;
    float: right;
}
</style>
